<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar fixed>
      <template #left>
        <img src="@/assets/logo.png" alt="" class="logo" />
      </template>
      <template #right>
        <van-icon @click="$router.push('/search')" name="search" color="#fff" size="0.48rem" />
      </template>
    </van-nav-bar>

    <!-- 频道导航 -->
    <div class="tabs_content">
      <van-tabs v-model="active" color="#007bff" animated sticky offset-top="1.22667rem">
        <van-tab v-for="item in list" :key="item.id" :title="item.name">
          <ArticleList :cid="item.id"></ArticleList>
        </van-tab>
      </van-tabs>

      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="showPopup" />
    </div>

    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" class="edit_wrap">
      <ChannelEdit @close="closeFn" :list.sync="list" @changeEV="changeFn"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserList } from '@/api'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'HM-Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      list: [], // 已选频道列表
      show: false // 弹出层控制显示隐藏
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取-用户已选频道
    async getList () {
      const res = await getUserList()
      console.log(res)
      this.list = res.data.data.channels
    },
    showPopup () {
      this.show = true
    },
    // 子传父方法
    closeFn () {
      this.show = false
    },
    changeFn (item) {
      const index = this.list.findIndex(obj => obj.id === item.id)
      this.active = index
    }
  }
}
</script>

<style scoped>
.logo {
  width: 100px;
  height: 30px;
}
.tabs_content {
  padding-top: 46px;
}

/* 设置 tabs 容器的样式 */
::v-deep .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
